⚡ 30 秒速记

• 核心判断：Fiber 把不可中断的递归遍历改造成可保存进度的工作单元，使渲染阶段能够调度、暂停和恢复
• 原理主线：围绕 「调和（Reconciliation）过程」、「Diff 策略的设计思想」、「把握三个“要点”，图解 Diff 逻辑」 建立输入、状态变化与输出之间的因果关系
• 文章范围：解析了 React 15 中的“栈调和”算法，包括调和（Reconciliation）与 Diff 算法的区别、源码结构、Diff 策略设计思想及其高性能实现原理，帮助读者深入理解 React 虚拟 DOM 与真实 DOM 同步的核心机制。
• 边界与代价：可中断的是渲染计算，提交阶段仍需保持一致性；React 18+ 并发能力也不等于所有更新都并行执行
• 工程落地：优化时先减少无效工作和长任务，再结合优先级、过渡更新和切片机制改善响应性

React 15 的栈调和会同步递归比较新旧虚拟 DOM，再把差异更新到真实 DOM。 它只比较同一层级，把原本昂贵的树比较降为一次自上而下的遍历；节点类型不同就直接替换，类型相同才继续深入。列表更新时，稳定且唯一的 key 能帮助复用同层节点，避免插入一项却连带重建后续节点。跨层移动仍会被当成删除后重建，而且递归过程不可暂停，这也是后来引入 Fiber 调和的重要背景。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

理解 React 15 的“栈调和”算法。

调和（Reconciliation）过程与 Diff 算法

“调和”又译为“协调”，协调过程的官方定义，藏在 React 官网对虚拟 DOM 这一概念的解释中，原文如下：

Virtual DOM 是一种编程概念。在这个概念里，UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫作协调（调和）。

我来划一下这段话里的重点：通过如 ReactDOM 等类库使虚拟 DOM 与“真实的” DOM 同步，这一过程叫作协调（调和）

说人话：调和指的是将虚拟 DOM映射到真实 DOM 的过程。因此严格来说，调和过程并不能和 Diff 画等号。调和是“使一致”的过程，而 Diff 是“找不同”的过程，它只是“使一致”过程中的一个环节